<template>
  <el-dialog title="参数设定-方法属性"
             append-to-body
             width="40%"
             :close-on-click-modal="false"
             class="el-dialog-param"
             :visible.sync="dialogGradeVisible">
    <div class="csstop">
        <div class="cssborder"></div>
        <div class="cssborder2"></div>
        <div class="cssborder3"></div>
    </div>
    <el-divider></el-divider>
    <div class="el-div-container">
      <el-form ref="dataForm" :model="levelObj" :rules="rules" :inline="true"  class="demo-form-inline">
        <el-form-item label="" prop="itemName">
          <el-input clearable  v-model="levelObj.itemName" placeholder="属性名称"
                    size="mini"
                    style="width: 100px;"/>
        </el-form-item>
        <el-form-item label=""  prop="serialNo">
          <el-input clearable  v-model="levelObj.serialNo" placeholder="属性代码"
                    size="mini"
                    style="width: 100px;"/>
        </el-form-item>
        <div class="el-dialog-item">
          <el-button class="filter-btn-item zll_dialog_bt"
                     size="mini"
                     style="margin-left: 10px;"
                     type="primary"
                     icon="el-icon-edit" @click="addLevel"
          >新增
          </el-button>
        </div>
      </el-form>

      <drug-table :tableData="tableData" :pageSizeParam="pageSizeParam" :tableLoading="tableLoading" :tableHeader="tableHeader" :option="option">
        <template slot-scope="props" slot="operate">
          <div>
            <label @click="handleDelete(props.rowData)" class="table-view">
                删除
            </label>
          </div>
        </template>
      </drug-table>
    </div>
  </el-dialog>

</template>

<script>
  import drugTable from "@/components/table/index";
  export default {
    name: "level",
    props: ["paramData"],
    components:{drugTable},
    data() {
      var notEmpty = (rule, value, callback) => {
        if (isNaN(value)) {
          return callback(new Error('请输入数字'));
        } else {
          callback();
        }
      };
      var validateName= (rule, value, callback) => {
        let names = [];
        if(this.tableData && this.tableData.length > 0){
          for(let data of this.tableData){
            names.push(data.itemName);
          }
        }
        if (names.includes(this.levelObj.itemName)) {
          callback(new Error('名称已存在!'));
        } else {
          callback();
        }
      };
      return {
        dataList: [],
        dialogGradeVisible: false,
        levelObj: {itemName: "", serialNo: "",itemCode:"method_attr"},
        tableData: [],
        tableHeader: [],
        tableLoading: true,
        option: {showOperate: true},
        pageSizeParam:20,

        rules: {
          itemName: [
            {validator: validateName, trigger: 'blur'}
          ],
          serialNo: [
            {validator: notEmpty, trigger: 'blur'}
          ]
        },
      }
    },
    mounted() {
      let self = this;
      self.$eventBus.$on("updateLevel", function () {
        self.getList();
      })
    },
    methods: {
      getList() {
        let self = this;
        self.tableLoading = true;
        self.$http({
          url: "/drug/codeItem/queryCodeItemList",
          method: "post",
          params: {itemCode: "method_attr"}
        }).then(resp => {
          if (resp.success) {
            self.pageSizeParam = 10;
            self.tableLoading = false;
            self.tableData = resp.result;
            self.tableHeader = [{"columnName": "createTimeFt", "coloumNameCn": "日期", "width": "150px"},
              {"columnName": "itemName", "coloumNameCn": "属性名称"},
              {"columnName": "serialNo", "coloumNameCn": "属性代码"}];
            self.option.showOperate = true;
          }
        });
      },

      handleDelete(rowData) {
        let self = this;
        let param = {id: rowData.id, status: "-1"};
        self.$confirm('确定删除该信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http({
            url: "/drug/codeItem/updateCodeItem",
            method: "post",
            params: param
          }).then(resp => {
            self.getList();
            self.$notify({
              title: '提示',
              message: '删除成功',
              type: 'success',
              duration: 1000
            });
          });
        });
      },
      addLevel() {
        let self = this;
        if(!self.levelObj.itemName || !self.levelObj.serialNo){
          this.$notify({
            title: '提示',
            message: '提交的选项不能为空',
            type: 'error',
            duration: 1000
          });
          return;
        }
        this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            self.tableLoading = true;
            self.$http({
              url: "/drug/codeItem/addCodeItem",
              method: "post",
              params: self.levelObj
            }).then(resp => {
              if (resp.success) {
                self.levelObj = {itemName: "", serialNo: "",itemCode:"method_attr"};
                self.getList();
              }
            });
          } else {
            return false;
          }
        });
      }
    },
    watch: {
      paramData(val) {
        let self = this;
        self.dialogGradeVisible = true;
        self.levelObj = {itemName: "", serialNo: "",itemCode:"method_attr"};
        self.getList();
      }
    }
  }
</script>
<style lang="scss" scoped>
  .btn-container {
    padding-top: 20px;
    padding-left: 50px;
    padding-right: 50px;
  }

  .btn-ul {
    list-style-type: none;
    width: 100%;
  }

  .btn-ul li {
    width: 20%;
    float: left;
    margin-top: 50px;
  }

  .clear {
    clear: both;
  }

  .el-dialog-item {
    display: inline-block;
  }
</style>
